<template>
  <div
    class="aside"
    :style="{ width: IS_VISIBLE_ASIDE ? '200px' : '60px' }"
  >
    <!-- 展开收起 -->
    <div
      class="shrink"
      :class="{'is-collapse': !IS_VISIBLE_ASIDE}"
      @click="changeAside"
    >
      <i class="shrink__icon iconfont iconfont-3"></i>
    </div>
    <!-- 菜单 -->
    <el-scrollbar
      class="menu"
      :class="{'is-collapse': !IS_VISIBLE_ASIDE}"
      :style="{ height: CLIENT_HEIGHT - 48 + 'px' }"
    >
      <template v-for="(parent, pIndex) of propData">
        <!-- 列表标题 -->
        <div
          :key="'title_' + pIndex"
          class="menu-title"
          :class="{'is-active': parent.isActive}"
          @click="changeActive({item: parent, parentIndex: pIndex, parentId: parent.id})"
        >
          <el-tooltip
            effect="dark"
            placement="right"
            :content="parent.name"
          >
            <el-row
              type="flex"
              align="middle"
            >
              <i
                v-if="parent.icon"
                class="menu-title__icon"
                :class="`${parent.icon}`"
              ></i>
              <span class="menu-title__text is-collapse">{{parent.name}}</span>
              <i
                v-if="parent.children && parent.children.length"
                class="menu-title__more is-collapse"
                :class="{
                        'el-icon-arrow-up': !parent.isOpen,
                        'el-icon-arrow-down': parent.isOpen
                    }"
              ></i>
            </el-row>
          </el-tooltip>
        </div>
        <!-- 列表 -->
        <div
          v-if="parent.children && parent.children.length"
          v-show="parent.isOpen"
          :key="'list_' + pIndex"
          class="menu-items is-collapse"
        >
          <div
            v-for="(child, cIndex) of parent.children"
            :key="cIndex"
            :class="{'is-active': child.isActive}"
            @click="changeActive({item: child, parentIndex: pIndex, parentId: parent.id, childIndex: cIndex, childId: child.id})"
            class="menu-item"
          >{{child.name}}
          </div>
        </div>
      </template>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Aside",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    data(v) {
      this.propData = v;
    }
  },
  data() {
    return {
      propData: this.data
    };
  },
  computed: {
    ...mapState(["CLIENT_HEIGHT", "IS_VISIBLE_ASIDE"])
  },
  methods: {
    ...mapMutations(["SET_IS_VISIBLE_ASIDE"]),
    // 展开收起
    changeAside() {
      this.SET_IS_VISIBLE_ASIDE(!this.IS_VISIBLE_ASIDE);
    },
    // 改变当前选择
    changeActive({ item, parentIndex, parentId, childIndex, childId }) {
      this.SET_IS_VISIBLE_ASIDE(true);
      this.setRouteActive(parentIndex, childIndex);
      this.$emit("menu-item", {
        item,
        parentIndex,
        parentId,
        childIndex,
        childId
      });
    },
    setRouteActive(parentIndex, childIndex) {
      this.propData.forEach((parent, pIndex) => {
        parent.isOpen = parent.isActive = parentIndex === pIndex;
        if (parent.children && parent.children.length) {
          parent.children.forEach((child, cIndex) => {
            child.isActive = childIndex === cIndex;
            if (parentIndex === pIndex && childIndex === cIndex) {
              parent.isActive = false;
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/color";
.aside {
  width: 200px;
  height: 100%;
  border-right: 1px solid $--border-major;
  background: #fff;
  box-sizing: border-box;
}
/* Shrink */
.shrink {
  padding: 14px 20px 10px;
  text-align: right;
  &__icon {
    display: inline-block;
    vertical-align: top;
    line-height: 24px;
    text-align: center;
    font-size: 15px;
    width: 15px;
    cursor: pointer;
    &:hover {
      color: $--text-high;
    }
  }
  &.is-collapse {
    text-align: center;
    .shrink__icon {
      transform: rotate(180deg);
    }
  }
}

/* Menu */
.menu {
  width: 100%;
  color: $--hint-major;
  &-title {
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    padding: 0 20px;
    cursor: pointer;
    outline: none;
    font-weight: 700;
    &__icon {
      font-size: 15px;
      margin-right: 9px;
    }
    &__more {
      position: absolute;
      right: 0;
      font-size: 15px;
    }
    &__text {
      display: inline-block;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 120px;
      height: 48px;
    }
  }

  &-items {
    font-size: 13px;
  }

  &-item {
    line-height: 42px;
    padding: 0 20px 0 45px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-title:hover,
  &-item:hover {
    color: $--text-high;
  }

  & .is-active {
    color: $--text-high;
    position: relative;
    background: $--background-major;
    &::after {
      display: block;
      content: "";
      position: absolute;
      height: 100%;
      width: 2px;
      background: $--text-high;
      top: 0;
      right: 0;
    }
  }

  &.is-collapse .is-collapse {
    display: none;
  }
}
</style>